import React,{useState,useEffect} from 'react'
import { Popconfirm, notification } from 'antd';    
import { ArrowRightOutlined, RollbackOutlined, LogoutOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'
import { DEFAULT_AVATAR_URL } from '../../../utils/constant';

import moment from 'moment';
import './index.css'
const logoutCheck = '真的要退出登录吗？';
function Outline(props){
    const [time,setTime]=useState('')
    const [timeText,setTimeText]=useState('')
    const [nowTime,setNowTime]=useState('')
    useEffect(()=>{
        calcTime()
        let timer=setInterval(()=>{
            calcTime()
        },1000)
    },[])
    function calcTime(){
        let hour=new Date().getHours()
        let time=hour<6? '凌晨好'
        : hour < 9
        ? '早上好'
        : hour < 11
        ? '上午好'
        : hour < 13
        ? '中午好'
        : hour < 17
        ? '下午好'
        : hour < 19
        ? '傍晚好'
        : hour < 22
        ? '晚上好'
        : '夜深了';
        const timeText =
            hour < 6
                ? '三更灯火五更鸡，正是男儿读书时。'
                : hour < 9
                ? '早起的鸟儿有虫吃！'
                : hour < 11
                ? '一日之计在于晨。'
                : hour < 13
                ? '树阴满地日当午， 梦觉流莺时一声。'
                : hour < 17
                ? '点一杯下午茶吧。'
                : hour < 19
                ? '夕阳无限好，只是近黄昏。'
                : hour < 22
                ? '更深月色半人家，北斗阑干南斗斜。'
                : '时间不早了，早点休息吧。';
                const nowTime = moment().format('HH:mm:ss');
                setTime(time)
                setNowTime(nowTime)
                setTimeText(timeText)
    }
    function turnLogout(){
        // 清除localStorage
        localStorage.clear();
        // 改变登录状态
        props.logout();
        // // 清空个人数据（任务计数、黑暗模式）
        // this.props.clearUserData();
        // // 清空任务
        // this.props.clearTask();
        // 清空用户信息
        props.clearUserInfo();
        // 提示消息
        openLogoutNoti();
        // 回到welcome页面
        props.history.replace('/');
    }
      // 退出登录的消息提示
     function openLogoutNoti() {
        notification.open({
            message: '退出成功！',
            description: '已退出 TodoList',
            duration: 2,
            placement: 'bottomLeft',
            icon: <ArrowRightOutlined />,
        });
    };
     // 退出取消的消息提示
     function openLogoutCancel () {
        notification.open({
            message: '取消退出！',
            description: '再看看吧~',
            duration: 2,
            placement: 'bottomLeft',
            icon: <RollbackOutlined />,
        });
    };
    return(
        <div className="outlineBox">
             {/* 头像盒子 */}
             <div className="avatarBox">
                    <img
                        src={
                            props.avatarUrl === '' ? DEFAULT_AVATAR_URL : props.avatarUrl
                        }
                        alt="用户头像"
                        className="outlineAvatar"
                    />
                </div>
                 {/* 左边文字 */}
                 <div className="leftWords">
                    <div className="welcomeUser">
                        {time}
                        {props.nickName === '' ? '！' : `，${props.nickName}！`}
                    </div>

                    <div className="timeText">{timeText}</div>
                </div>
                  {/* 应用标题 */}
                  <div className="appHead">TodoList</div>
                   {/* 右边文字 */}
                <div className="rightWords">
                    <div className="timeBox"> {nowTime}</div>
                    {/* <div className="doneCountText">
                        已完成任务
                        <span className="doneCount">&nbsp;{this.props.count}&nbsp;</span>
                        个，继续加油！
                    </div> */}
                </div>
                {/* 退出按钮 */}
                <Popconfirm
                    placement="bottomRight"
                    title={logoutCheck}
                    onConfirm={turnLogout}
                    onCancel={openLogoutCancel}
                    okText="退出！"
                    cancelText="再看看！"
                >
                    <div className="logoutBtn" id={this.props.isDark ? 'logoutBtnDark' : ''}>
                        <LogoutOutlined />
                    </div>
                </Popconfirm>
        </div>
    )
}
export default connect(
    state=>({avatarUrl:state.userInform.avatarUrl,nickName: state.userInform.nickName,})
)(Outline) 